<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width:100px;height:100px;background: red;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div class="box1">hello</div>
</body>
<script src="../jquery.js"></script>
<script>
    
    // 自定义动画
    $(".box1").click(function(){
        $(".box1").animate({
            left:500,
            top:300,
            fontSize:50,
            padding: 30,
            opacity:0
        }, 2000, ()=>{
            console.log("动画结束后要执行的功能")
        })
    })

    // ========

    // $(".box1").click(function(){
    //     $(".box1").animate({
    //         width:0,
    //         height:0,
    //         left:50,
    //         top:50
    //     })
    // })

    // $(".box1").click(function(){
    //     $(".box1").animate({
    //         width:0,
    //         left:100
    //     })
    // })


</script>
</html>